<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
</head>
<body>
    <!-- 39.全选/反选功能 -->
    <div>
        <label><input type="checkbox">上杉绘梨衣</label>
        <label><input type="checkbox">源稚生</label>
        <label><input type="checkbox">源稚女</label>
        <label><input type="checkbox">矢吹樱</label>
        <label><input type="checkbox">乌鸦</label>
    </div>
    <label><input type="checkbox" id='all'>全选</label>
    <button id='btn'>反选</button>
</body>
<script>
//全选
$('#all').change(function () {
        let flag = $(this).prop('checked');
        $(':checkbox').prop('checked', flag);
    })
    //前四个控制后一个
    $('div :checkbox').change(function() {
        let flag=true;
        var ins= $('div :checkbox');
        for(let a=0;a<ins.length;a++) {
            if(!ins[a].checked){
                flag=false;
                break;
            }
        }
        $('#all').prop('checked',flag);
    })
    //反选
    $('#btn').click(fn)
    function fn() {
        var ins= $('div :checkbox');
        for(let a=0;a<ins.length;a++) {
            if(ins[a].checked==true){
                ins[a].checked=false
            }else{
                ins[a].checked=true
            }
        }
    }
</script>
</html>